
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { Routes, Route } from 'react-router-dom';
import AddArticle from "./AddArticle"
import ArticleList from "./ArticleList"

import { Breadcrumb, Layout, Menu, theme } from 'antd';
import "../static/css/AdminIndex.css";

const { Content, Footer, Sider } = Layout;

function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}

const items = [
    getItem('工作台', '1', <PieChartOutlined />),
    getItem('添加文章', '2', <DesktopOutlined />),
    getItem('文章管理', 'sub1', <UserOutlined />, [
        getItem('添加文章', 'addArticle'),
        getItem('文章列表', 'articleList'),
    ]),
    getItem('留言管理', '9', <FileOutlined />),
];

const AdminIndex = () => {
    const [collapsed, setCollapsed] = useState(false);
    const navigate = useNavigate();

    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const handleClickArticle = e => {
        console.log("key");
        console.log(e.key);
        if (e.key == "addArticle") {
            navigate('/index/add');
        } else {
            navigate('/index/list');
        }
    }

    return (
        <Layout
            style={{
                minHeight: '100vh',
            }}
        >
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className='logo' />
                <Menu onClick={handleClickArticle} theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
            </Sider>
            <Layout className="site-layout">
                <Content
                    style={{
                        margin: '0 16px',
                    }}
                >
                    <Breadcrumb
                        style={{
                            margin: '16px 0',
                        }}
                    >
                        <Breadcrumb.Item>后台管理</Breadcrumb.Item>
                        <Breadcrumb.Item>工作台</Breadcrumb.Item>
                    </Breadcrumb>
                    <div
                        style={{
                            padding: 24,
                            minHeight: 360,
                            background: colorBgContainer,
                        }}
                    >
                        <div>
                            <Routes>
                                <Route path='/' exact element={<AddArticle />}></Route>
                                <Route path='/add/' exact element={<AddArticle />}></Route>
                                <Route path='/list/' element={<ArticleList />}></Route>
                                <Route path='/add/:id' exact element={<AddArticle />}></Route>
                            </Routes>
                        </div>
                    </div>
                </Content>
                <Footer
                    style={{
                        textAlign: 'center',
                    }}
                >
                    红石榴21
                </Footer>
            </Layout>
        </Layout>
    );
};
export default AdminIndex;